到目前為止，我們已經完成了一個「有結構、有樣式」的履歷網站：

Day 1：打好 HTML 骨架

Day 2：用 CSS / SCSS 美化

但這個網站目前是「靜態」的，使用者只能看，沒辦法互動。
今天開始，我們會引入 TypeScript，讓網站能有簡單的互動功能。這樣，履歷網站就會從「一份漂亮的靜態簡報」變成「有生命的應用」。

今日目標

認識 TypeScript 是什麼

了解 型別系統 為什麼重要

在履歷網站加上簡單的互動功能

點擊按鈕顯示更多內容

用 TypeScript 型別確保程式碼正確

基礎概念：TypeScript 是什麼？

TypeScript（TS）是 JavaScript 的超集，它的最大特色就是 靜態型別。

JavaScript 允許你這樣寫：

let age = 25;
age = "三十"; // 不會報錯

在小專案也許沒差，但在大型專案裡，這種隱性錯誤會很致命。
而 TypeScript 會在你寫程式的時候就報錯：

let age: number = 25;
age = "三十"; // ❌ 報錯：不能把字串賦值給 number

這樣就能避免很多低級錯誤。

實作：履歷網站加上 TypeScript 互動功能

我們要在履歷網站加上一個 「更多介紹」按鈕，點下去會展開一段隱藏的內容。

新增 HTML 按鈕（放在 About 區塊）

更多介紹

新增 TypeScript 檔案 main.ts
// 定義按鈕與段落元素
const toggleBtn = document.querySelector('#toggle-btn');
const moreInfo = document.querySelector('#more-info');

// 確保元素存在再綁定事件
if (toggleBtn && moreInfo) {
toggleBtn.addEventListener('click', () => {
if (moreInfo.style.display === 'none') {
moreInfo.style.display = 'block';
toggleBtn.textContent = '收起介紹';
} else {
moreInfo.style.display = 'none';
toggleBtn.textContent = '更多介紹';
}
});
}

編譯成 JavaScript

因為瀏覽器不直接執行 TS，我們需要編譯：

tsc main.ts --target ES6 --outFile main.js

在 index.html 引入 main.js：

成果

頁面上會出現「更多介紹」按鈕。

點下去，隱藏的段落會展開，按鈕文字變成「收起介紹」。

再點一次，內容會收起來，按鈕文字回到「更多介紹」。

這就是第一個「互動功能」！雖然簡單，但代表你的履歷網站已經不再是死板的 HTML + CSS，而是能和使用者互動。

小心踩雷（常見誤用範例）

1. 忘記檢查元素是否存在

初學者常直接寫：

document.querySelector('#btn').addEventListener('click', () => {
console.log('clicked');
});

👉 問題：如果 #btn 沒有出現在頁面上，會直接報錯。

正確做法：

const btn = document.querySelector('#btn');
if (btn) {
btn.addEventListener('click', () => console.log('clicked'));
}

2. 不寫型別

在 TS 裡，很多人會偷懶不寫型別：

const btn = document.querySelector('#btn');

👉 問題：這樣 btn 的型別會是 Element | null，使用時要不斷轉型，很容易出錯。

正確做法：

const btn = document.querySelector('#btn');

直接指定型別，程式碼更安全。

3. 直接用 innerHTML 修改內容

很多人會用 innerHTML 來改內容：

btn.innerHTML = "更多介紹";

👉 問題：這樣可能造成 XSS 安全漏洞，也不必要。

正確做法：

btn.textContent = "更多介紹";

下一步（Day 4 預告）

明天，我們要進一步學習 DOM 操作與事件綁定：

學會如何用 TS 操控不同的元素（不只文字，還能改樣式、圖片）

幫履歷網站加上更豐富的互動功能（例如切換主題、技能分類顯示）